
import { Button, CloseButton, Dialog, Portal, Link, Box } from "@chakra-ui/react"
import { Highlight, themes } from "prism-react-renderer"



// Python 代码显示组件
const PythonCodeDisplay = ({ code, language = "python" }: { code: string, language?: string }) => {
    return (
        <Box
            bg="gray.900"
            borderRadius="md"
            p={4}
            overflow="auto"
            maxHeight="600px"
            fontFamily="mono"
            fontSize="sm"
        >

            <Highlight
                theme={themes.vsDark}
                code={code}
                language={language}
            >
                {({ className, style, tokens, getLineProps, getTokenProps }) => (
                    <pre className={className} style={style}>
                        {tokens.map((line, i) => (
                            <div key={i} {...getLineProps({ line })}>
                                <span
                                    style={{
                                        display: 'inline-block',
                                        width: '3em',
                                        userSelect: 'none',
                                        opacity: 0.5,
                                        marginRight: '1em'
                                    }}
                                >
                                    {i + 1}
                                </span>
                                {line.map((token, key) => (
                                    <span key={key} {...getTokenProps({ token })} />
                                ))}
                            </div>
                        ))}
                    </pre>
                )}
            </Highlight>
        </Box>
    )
}
export default function ScriptDisplayDialog({ item }: { item: { name: string, script: string } }) {
    return (
        <Dialog.Root size="xl">
            <Dialog.Trigger asChild>
                <Link colorPalette="blue">{item.name}</Link>
            </Dialog.Trigger>
            <Portal>
                <Dialog.Backdrop />
                <Dialog.Positioner>
                    <Dialog.Content>
                        <Dialog.Header>
                            <Dialog.Title>{item.name}</Dialog.Title>
                        </Dialog.Header>
                        <Dialog.Body>
                            <PythonCodeDisplay code={item.script} language={'python'} />
                        </Dialog.Body>
                        
                        <Dialog.CloseTrigger asChild>
                            <CloseButton size="sm" />
                        </Dialog.CloseTrigger>
                    </Dialog.Content>
                </Dialog.Positioner>
            </Portal>
        </Dialog.Root>
    )
}
